<template>
  <div id="detailContainer" class="slide-enter-active">
    <Header title="影片详情">
      <i class="iconfont icon-right" @touchstart="handleToBack"></i>
    </Header>
    <Loading v-if="isLoading"/>
    <div v-else id="content" class="contentDetail">
      <div class="detail_list">
        <div class="detail_list_bg" :style="{'background-image': 'url('+detailMovie.img.replace(/w\.h/,'148.208')+')'}"></div>
        <div class="detail_list_filter"></div>
        <div class="detail_list_content">
          <div class="detail_list_img">
            <img :src="detailMovie.img | setHW('148.208')"/>
          </div>
          <div class="detail_list_info">
            <h2>{{ detailMovie.nm }}</h2>
            <p>{{ detailMovie.enm }}</p>
            <p>{{ detailMovie.sc }}</p>
            <p>{{ detailMovie.cat }}</p>
            <p>{{ detailMovie.fra }}</p>
            <p>{{ detailMovie.pubdesc }}</p>
          </div>
        </div>
      </div>
      <div class="detail_intro">
        <p>{{ detailMovie.dra }}</p>
      </div>
      <div class="detail_player swiper-container" ref="detail_player">
        <ul class="swiper-wrapper">
          <li v-for="(item,index) in detailMovie.photos" :key="index" class="swiper-slide">
            <div>
              <img :src="item | setHW('148.208')" alt="">
          <!-- todo 页面细节调整             -->
            </div>
        <!--<p>{{ detailMovie.dir }}</p>
            <p>{{ detailMovie.star }}</p>-->
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header';

/**
 * Q："TypeError: Cannot read properties of undefined (reading 'replace')
 * A：这时候你就要检查下你的项目中template模板中是否有用到了没有定义的数据。
 *    因为我的模板上用到了detailMovie.img,因为这个内容在template中的数据是不存在的，而存在于异步访问回来的请求，
 *    因此，需要给template中的数据定义一个默认的img属性。
 */
export default {
  name: "Detail",
  data() {
    return {
      detailMovie: {
        img: '',
      },
      isLoading: true
    }
  },
  components: {
    Header
  },
  props: ['movieId'],
  methods: {
    handleToBack() {
      this.$router.back();
    }
  },
  mounted() {
    // console.log(this.movieId)
    this.axios.get('/api/detailmovie?movieId=' + this.movieId).then((res) => {
      var msg = res.data.msg;
      if (msg === '成功') {
        // todo 挂载的数据筛选
        this.isLoading = false;
        this.detailMovie = res.data.data[0];
        this.$nextTick(() => {
          // eslint-disable-next-line no-undef
          new Swiper(this.$refs.detail_player, {//这里是引用Swiper这个类来做滑动效果
            slidesPerView: 'auto',
            freeMode: true,
            freeModeSticky: true
          });
        });
      }
    });
  }
}
</script>

<style scoped>
#detailContainer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  min-height: 100%;
  background: white;
}

#detailContainer.slide-enter-active {
  animation: .3s slideMove;
}

@keyframes slideMove {
  0% {
    transform: translateX(100%)
  }
  100% {
    transform: translateX(0)
  }
}

#content.contentDetail {
  display: block;
  margin-bottom: 0;
}

#content .detail_list {
  height: 200px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.detail_list .detail_list_bg {
  width: 100%;
  height: 100%;
  background: 0 40%;
  filter: blur(20px);
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
}

.detail_list .detail_list_filter {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #40454d;
  opacity: .55;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.detail_list .detail_list_content {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.detail_list .detail_list_img {
  width: 108px;
  height: 150px;
  border: solid 1px #f0f2f3;
  margin: 20px;
}

.detail_list .detail_list_img img {
  width: 100%;
  height: 100%;
}

.detail_list .detail_list_info {
  margin-top: 20px;
}

.detail_list .detail_list_info h2 {
  font-size: 20px;
  color: white;
  font-weight: normal;
  line-height: 40px;
}

.detail_list .detail_list_info p {
  color: white;
  line-height: 20px;
  font-size: 14px;
  color: #ccc;
}

#content .detail_intro {
  padding: 10px;
}

#content .detail_player {
  margin: 20px;
}

.detail_player .swiper-slide {
  width: 70px;
  margin-right: 20px;
  text-align: center;
  font-size: 14px;
}

.detail_player .swiper-slide img {
  width: 100%;
  margin-bottom: 5px;
}

.detail_player .swiper-slide p:nth-of-type(2) {
  color: #999;
}
</style>
